<template>
    <view class="n-component-avatar">
        <view class="cu-avatar round" :class="avatar_size" :style="true_avatar_url ? 'background-image:url(' + true_avatar_url +')' : ''">
            <text v-if="!true_avatar_url" class="n-component-avatar-icon cuIcon-people" :class="avatar_size"></text>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['avatar_size', 'avatar_url'],
        data() {
            return {
                true_avatar_url: ''
            }
        },
        created() {
            this.setTrueAvatarUrl();
        },
        watch: {
            avatar_url() {
                this.setTrueAvatarUrl();
            }
        },
        methods: {
            setTrueAvatarUrl() {
                let oss_resize = '?x-oss-process=image/resize,m_fixed,limit_0,h_128,w_128';
                if (this.avatar_url == 'my') {
                    if (this.$store.state.user.identity_info.avatar) {
                        this.true_avatar_url = this.$app.oss_base_url + this.$store.state.user.identity_info.avatar + oss_resize;
                    }
                    return;
                }
                if (this.avatar_url) {
                    if (this.$nddyny.string.isUrlHavePrefix(this.avatar_url)) {
                        this.true_avatar_url = this.avatar_url;
                    } else {
                        this.true_avatar_url = this.$app.oss_base_url + this.avatar_url + oss_resize;
                    }
                    return;
                }
                this.true_avatar_url = '';
                return;
            }
        }
    }
</script>
